<template>
    <div class="tmpl">
        <!-- 轮播图  :url="lunboUrl"-->
        <my-swipe margintop="margin-top: 10px;"></my-swipe>
        <div>
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="goBack"></a>
            <input type="text" id="keysogo" value="" placeholder="请输入您要搜索的关键字">
            <div class="keysogo">
                <ul>
                    <li>
                        <span>距离</span>
                        <span :class="icontriangleleft" @click="loadMore(1)"></span>
                    </li>
                    <li>
                        <span>人气</span>
                        <span :class="icontriangleleft2" @click="loadMore(1)"></span>
                    </li>
                    <li>
                        
                        <select v-on:change="indexSelect($event)" class="selectclass">
                <option value="">筛选</option>
                <option v-for="option1 in YX" v-bind:value="option1.text">{{option1.text}}</option>
            </select>
                    </li>
                </ul>
            </div>
            <div class="keysogo"></div>
        </div>
        <div class="photo-list">
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="isAutoFill" ref="loadmore">
            <ul class="mui-table-view">
                <li v-for="news in prods" :key="news.companyId" class="mui-table-view-cell mui-media">
                <router-link :to="{name:'news.detail',query:{id:news.companyId} }">
                    <img class="mui-pull-left photo-listliimg" :src="news.companyImg">
                    <div class="mui-media-body">
                        <b><span v-text="news.companyName"></span></b>
                        <div class="news-desc">
                            <p>地址:{{news.companyAdress}}</p>
                            <p><b>经营特色:</b>{{news.companyService}}</p>
                            <p><b>电话:{{news.companyPhone}}</b></p>
                        </div>
                    </div>
                </router-link>
            </li>
            </ul>
        </mt-loadmore>
        <div value="" id="btnSendSms" @click="loadmoreConcat" :class="btnclass">{{btnSendSms}}</div>
        </div>
        <br>
        <br>
        <br>
        <br>
    </div>
</template>
<script>
    // | convertDate
export default {
    data(){
        return {
            pageIndex:1,//页码
            rowsIndex:5,//每页显示条数
            prods:[],//商品列表数据
            allLoaded:true,//false, //是否禁止触发上拉函数
            isAutoFill:false,//是否自动触发上拉函数
            btnSendSms:'',
            btnclass:'mui-icon icon-xiangxiajiantoubb',
            icontriangleleft:'mui-icon icon-triangle-left icontriangleleft',
            icontriangleleft2:'mui-icon icon-triangle-left icontriangleleft',
            clickLoadMore:'clickLoadMore',
            clickLoadMore2:'clickLoadMore2',
            iforder:3,
            A:'',
             YX:[
                {
                    text:'住宿'
                },
                {
                    text:'餐饮'
                },
                {
                    text:'棋牌'
                },
                {
                    text:'采摘'
                },
                {
                    text:'亲子'
                },
                {
                    text:'全选'
                },
                {
                    text:'海口'
                },
                {
                    text:'三亚'
                },
                {
                    text:'东线'
                },
                {
                    text:'西线'
                },
                {
                    text:'中线'
                },

            ],
        }
    },
    created(){
        this.loadMore();//1
    },
    methods:{
        indexSelect(event){
            this.A = event.target.value;
            if(this.A == '全选'){
                this.A = '';
            }
            this.pageIndex = 1;
            this.loadMore();
            // console.log(this.A);
        },
        goBack(){
            console.log(1);
        },
        loadBottom(){
            //console.log('上啦触发了');
            this.loadmoreConcat();
        },
        loadMore(gosoo){
            if(gosoo){
                this.pageIndex = 1;
                if(this.icontriangleleft2 == 'mui-icon icon-triangle-left icontriangleleft'){
                    this.icontriangleleft2 = 'mui-icon icon-arrow-right-bottom icontriangleleft';
                    this.iforder = 1;
                }else
                if(this.icontriangleleft2 == 'mui-icon icon-arrow-right-bottom icontriangleleft'){
                    this.icontriangleleft2 = 'mui-icon icon-arrow-right-top icontriangleleft';
                    this.iforder = 2;
                }else
                if(this.icontriangleleft2 == 'mui-icon icon-arrow-right-top icontriangleleft'){
                    this.icontriangleleft2 = 'mui-icon icon-arrow-right-bottom icontriangleleft';
                    this.iforder = 1;
                }
            }
            var stringarr = '';
            if(this.A){
                stringarr = this.A +'::companyName,companyAdress,companyService,companyIntro';
            }
            var iforderorder = '';//let
            if(this.iforder != 3){
                iforderorder = '&order=views&iforder='+this.iforder;
            }
            //发起请求获取数据填充到页面
            this.$ajax.get('api/friendship', {
　　params: { 'stringarr': stringarr }
})
            .then(res=>{
                this.prods = res.data.rows;
                // console.log(res.data.total,this.rowsIndex);
                if(res.data.total != this.rowsIndex){
                    //数据不到10条，就是剩余的所有了
                    // this.allLoaded = true;//禁止调用上拉函数了
                    this.btnclass = 'notclickn';
                    this.btnSendSms = '已经没有更多';
                }else{
                    this.btnclass = 'mui-icon icon-xiangxiajiantoubb';
                    this.btnSendSms = '';
                }
            })
            .catch(err=>{
                console.log(err);
            });
        }, //追加数据
        loadmoreConcat(){
            var stringarr = '';
            if(this.A){
                stringarr = this.A +'::companyName,companyAdress,companyService,companyIntro';
            }
            var iforderorder = '';//let
            if(this.iforder != 3){
                iforderorder = '&order=views&iforder='+this.iforder;
            }
            
             this.$ajax.get('api/friendship', {
　　params: { 'stringarr': stringarr }
})
            .then(res=>{
                //判断是否还有数据
                if(res.data.total != this.rowsIndex){
                    //数据不到10条，就是剩余的所有了
                    // this.allLoaded = true;//禁止调用上拉函数了
                    this.btnclass = 'notclickn';
                    this.btnSendSms = '已经没有更多';
                }else{
                    this.prods = this.prods.concat(res.data.rows);
                    // console.log(this.$refs.loadmore.onBottomLoaded());
                }
                // 通知上啦操作已经完结
                this.$refs.loadmore.onBottomLoaded();

            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}



</script>
<style>
.icontriangleleft {
    font-size: 12px;
}
#btnSendSms {
    width: 100%;clear:both;height: 50px;line-height: 50px; margin-top: 10px;
    text-align:center;
        color: #999;
}
.notclickn {
    pointer-events: none;
}
.selectclass {
    margin-left: 0px; margin-top: -10px;
}
.keysogo {
    width: 100%;clear:both;
}
.keysogo ul li {
    float: left;width: 29%;margin-right: 2%;margin-left: 2%;list-style: none;
}
#keysogo {
    float: left;width: 92%;
}
.mui-table-view-cell {
    border:#c8c7cc solid 1px;
}
.photo-header li {
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}

.photo-header ul {
    /*强制不换行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5;
}


/*下面的图片*/

.photo-list li {
    list-style: none;
    position: relative;
    margin-top: 15px;
}

.photo-listliimg {
    width: 128px;
    height: 85px;
    vertical-align: top;
    margin-right: 20px;
}

.photo-list ul {
    padding-left: 0px;
    margin: 0;
}

.photo-list p {
    margin-bottom: 0px;
}
.mui-media-body , p {
    font-size: 12px;
}
.mui-media-body span {
    font-size: 14px;
}
 
/*图片懒加载的样式*/
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.mui-media-body p {
    color: #0bb0f5;
}
.news-desc a , .mui-media-body p {
    color: black;
}
</style>
